<script setup>
    import { ref } from 'vue';
    import {artAddChannelsService,artEditChannelsService} from '@/api/article.js'
    import { postLouYu } from '@/api/gongs.js'

    // 表单规则
    const rules={
        building_number:[
            {required:true,message:'请输入楼宇名称',trigger:'blur'},
            {patter:/^\S{1,10}$/,message:'分类名必须是1-10位的非空字符',trigger:'blur'}
        ]
    }

    // 预校验
    const formRef=ref()
    // 控制弹出层的显示
    const dialogVisible=ref(false)

    // 提供一个方法 
    // open({}) 如果是空的就说明是添加
    // open({id:***,name:***}) 如果有数据就说明是编辑
    const open = (row)=>{
        // console.log(row);
        dialogVisible.value=true
        if(row){
            // 如果有row就运行
            formModel.value={...row}
        }
    }

    // 父传子
    const emit = defineEmits('success')

    // 数据源初始化
    const formModel = ref({
        action: 'add', // list为请求列表，filter为筛选，find为查询；add为增加单元，del为删除单元
        page: '1',
        perPage: '10',
        building_number: '' // 想要增加的单元名称
    });
    

    // 添加楼宇功能
    const onSubmit= async ()=>{
       await formRef.value.validate() //预校验
           const isEdit = formModel.value.id
       // 如果isEdit 是true的话就是 编辑分类
       if(isEdit){
        await artEditChannelsService(formModel.value) //编辑分类的方法
        ElMessage.success('编辑成功') 
       }else{
            try{
                const po = {
                    action: 'add', 
                    page: '1',
                    perPage: '10',
                    building_number:formModel.value.building_number
                }
                await postLouYu(po) //添加分类的方法
                ElMessage.success('添加成功')
            }catch(err){
                console.log(err);
            }
       }
       emit('success')
       dialogVisible.value=false
    }

    // 将一个组件中的方法往外暴露 defineExpose（{}）
    defineExpose({
        open
    })

</script>
<template>
        <el-dialog v-model="dialogVisible" :title="formModel.id? '编辑楼宇' : '添加楼宇'" width="30%">

        <el-form :model="formModel" :rules="rules" ref="formRef">
            <el-form-item label="楼宇名称" prop="building_number">
                <el-input v-model="formModel.building_number" placeholder="请输入楼宇名称"></el-input>
            </el-form-item>
        </el-form>

        <template #footer>
        <span class="dialog-footer">
            <el-button @click="dialogVisible = false">取消</el-button>
            <el-button type="primary" @click="onSubmit">
            确认
            </el-button>
        </span>
        </template>
    </el-dialog>
</template>

<style lang="sass" scoped>
</style>